<template>
  <!-- 2、5 -->
  <div class="container" v-if="modelData.show">
    <div class="avatar">
      <el-image style="width: 120px; height: 150px" :src="modelData.avatar" />
    </div>
    <div class="user_info">
      <ul>
        <li v-show="isShow.age">
          <SvgIcon
            name="icon-jibenziliao"
            width="25px"
            hight="25px"
            class="return"
          ></SvgIcon>
          <span>{{ modelData.age }}</span>
        </li>
        <li v-show="isShow.address">
          <SvgIcon
            name="code"
            width="20px"
            hight="20px"
            class="return"
          ></SvgIcon>
          <span>{{ modelData.address }}</span>
        </li>
        <li>
          <SvgIcon
            name="icon-education-1-copy"
            width="25px"
            hight="25px"
            class="return"
          ></SvgIcon>
          <span>{{ modelData.workService }}年经验</span>
        </li>
        <li v-show="isShow.connect">
          <SvgIcon
            name="connect"
            width="25px"
            hight="25px"
            class="return"
          ></SvgIcon>
          <span>{{ modelData.phoneNumber }}</span>
        </li>
        <li v-show="isShow.email">
          <SvgIcon
            name="icon-rongyu1"
            width="20px"
            hight="20px"
            class="return"
          ></SvgIcon>
          <span>{{ modelData.email }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { IBASEINFO } from '@/interface/model'
import type { IMODELSTYLE } from '@/interface/modelStyle'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { reactive, onMounted } from 'vue'
defineOptions({
  name: 'BASE_INFO_2',
})
const props = defineProps<{
  modelData: IBASEINFO // 模块数据
  modelStyle: IMODELSTYLE // 模块样式
}>()
const isShow = reactive(props.modelData.isShow)

// onMounted(()=>{
//   console.log(props.modelData);
// })
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding-top: v-bind('modelStyle.pTop');
  padding-bottom: v-bind('modelStyle.pBottom');
  padding-left: v-bind('modelStyle.pLeftRight');
  padding-right: v-bind('modelStyle.pLeftRight');
  margin-bottom: v-bind('modelStyle.mBottom');
  margin-top: v-bind('modelStyle.mTop');
  .avatar {
    border: 3px solid #e5e5e5;
    overflow: hidden;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .user_info {
    width: 100%;

    ul {
      display: flex;
      flex-direction: column;

      li {
        height: 35px;
        display: flex;
        align-items: center;
        list-style: none;
        color: v-bind('modelStyle.textColor');
        font-size: v-bind('modelStyle.textFontSize');
        font-weight: v-bind('modelStyle.textFontWeight');

        & :first-child {
          margin-right: 10px;
        }

        span {
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>
